{extend name='extra@admin/content'}

{block name="button"}
<div class="nowrap pull-right" style="margin-top:10px">
    {if auth("$classuri/add")}
    <button data-modal="{:url('add')}" data-title="添加API接口" class='layui-btn layui-btn-small'><i
            class='fa fa-plus'></i> 添加接口
    </button>
    {/if}
    {if auth("$classuri/forbid")}
    <button data-update data-field='status' data-value='0' data-action='{:url("$classuri/forbid")}'
            class='layui-btn layui-btn-small layui-btn-danger'><i
            class='fa fa-ban'></i> 禁用接口
    </button>
    {/if}
    {if auth("$classuri/resume")}
    <button data-update data-field='status' data-value='1' data-action='{:url("$classuri/resume")}'
            class='layui-btn layui-btn-small'><i
            class='fa fa-check-circle-o'></i> 启用接口
    </button>
    {/if}
    {if auth("$classuri/forbid")}
    <button data-update data-field='isTest' data-value='0' data-action='{:url("$classuri/forbid")}'
            class='layui-btn layui-btn-small layui-btn-danger'><i
            class='fa fa-ban'></i> 禁用接口测试
    </button>
    {/if}
    {if auth("$classuri/resume")}
    <button data-update data-field='isTest' data-value='1' data-action='{:url("$classuri/resume")}'
            class='layui-btn layui-btn-small'><i
            class='fa fa-check-circle-o'></i> 启用接口测试
    </button>
    {/if}
    {if auth("$classuri/del")}
    <button data-update data-field='delete' data-action='{:url("$classuri/del")}'
            class='layui-btn layui-btn-small layui-btn-danger'><i class='fa fa-close'></i> 删除接口
    </button>
    {/if}
    {if auth("$classuri/refresh")}
    <button data-load="{:url('refresh')}" class='layui-btn layui-btn-small'><i class="fa fa-refresh"></i> 刷新接口路由
    </button>
    {/if}
</div>
{/block}

{block name="content"}

<!-- 表单搜索 开始 -->
<form class="layui-form layui-form-pane form-search" action="__SELF__" onsubmit="return false" method="get">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">接口名称</label>
        <div class="layui-input-inline">
            <input name="apiName" value="{$Think.get.apiName|default=''}" placeholder="接口名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">接口HASH</label>
        <div class="layui-input-inline">
            <input name="hash" value="{$Think.get.hash|default=''}" placeholder="接口HASH" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">接口简介</label>
        <div class="layui-input-inline">
            <input name="info" value="{$Think.get.info|default=''}" placeholder="接口简介" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">操作者</label>
        <div class="layui-input-inline">
            <select name='handler' class='layui-select' lay-search>
                <option value=''> - 选择操作者 -</option>
                <!--{foreach $handlers as $key=>$handler}-->
                <!--{if $Think.get.handler eq $key}-->
                <option selected value="{$key}">{$handler}</option>
                <!--{else}-->
                <option value="{$key}">{$handler}</option>
                <!--{/if}-->
                <!--{/foreach}-->
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name='status' class='layui-select' lay-search>
                <option value=''> - 选择状态 -</option>
                <option {if $Think.get.status=='1'}selected{/if} value="1">使用中</option>
                <option {if $Think.get.status=='0'}selected{/if} value="0">已禁用</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
    </div>
</form>
<!-- 表单搜索 结束 -->

<form onsubmit="return false;" data-auto="" method="POST">
    <input type="hidden" value="resort" name="action"/>
    <table class="table table-hover">
        <thead>
        <tr>
            <th class='list-table-check-td'>
                <input data-none-auto="" data-check-target='.list-check-box' type='checkbox'/>
            </th>
            <th class='list-table-sort-td'>
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-mini">排 序</button>
            </th>
            <th class='text-left'>接口名称</th>
            <th class='text-center'>接口映射</th>
            <th class='text-left'>接口简介</th>
            <th class='text-center'>请求方式</th>
            <th class='text-center'>请求Header要求</th>
            <th class='text-center'>接口分组</th>
            <th class='text-center'>接口状态</th>
            <th class='text-center'>接口参数设置</th>
            <th class='text-center'>创建时间</th>
            <th class='text-center'>修改时间</th>
            <th class='text-center'>操作者</th>
            <th class='text-center'>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach $list as $key=>$vo}
        <tr>
            <td class='list-table-check-td'>
                <input class="list-check-box" value='{$vo.id}' type='checkbox'/>
            </td>
            <td class='list-table-sort-td'>
                <input name="_{$vo.id}" value="{$vo.sort}" class="list-sort-input"/>
            </td>
            <td class='text-left'>{$vo.apiName|default="<span style='color:#ccc'>暂无</span>"}</td>
            <td class='text-center'><a href="{:url('@')}api/{$vo.hash}" target="_blank">{$vo.hash|default="<span style='color:#ccc'>暂无</span>"}</a></td>
            <td class='text-left'>{$vo.info|cut_str|default="<span style='color:#ccc'>暂无</span>"}</td>
            <td class='text-center'>{$vo.method==1?'<span style="color:#c00">post</span>':($vo.method==2?'<span style="color:#090">get</span>':'不限')}</td>
            <td class='text-center'>
                <span style="color:#090">{:sysconf('app_version')}</span>
                {if $vo.accessToken eq 1}
                <span class="text-explode">|</span>
                <span style="color:#090">Token</span>
                {/if}
                {if $vo.needLogin eq 1}
                <span class="text-explode">|</span>
                <span style="color:#090">Login</span>
                {/if}
            </td>
            <td>
                <span>
                    <a data-add-tag='{$vo.id}' data-used-id='{:join(",",array_keys($vo.tags_list))}'
                       id="tag-api-{$vo.id}" href='javascript:void(0)'
                       style='font-size:12px;font-weight:400;border-radius:50%;background:#9f9f9f'
                       class='label label-default'>+</a>
                </span>
                {if empty($vo.tags_list)}
                <span style='color:#999'>尚未设置分组</span>
                {else}
                {foreach $vo.tags_list as $k=>$tag}
                <span>
                    <a href='javascript:void(0)' style='font-size:12px;font-weight:400;background:#9f9f9f'
                       class='label label-default'>{$tag}</a>
                </span>
                {/foreach}
                {/if}
            </td>
            <td class='text-center'>
                {if $vo.status eq 0}
                    {if auth("$classuri/resume")}
                    <a data-update="{$vo.id}" data-field='status' data-value='1' data-action='{:url("$classuri/resume")}'
                       href="javascript:void(0)" style="color:#c00">已禁用</a>
                    {else}
                    <span style="color:#c00">已禁用</span>
                    {/if}
                {else}
                    {if auth("$classuri/forbid")}
                    <a data-update="{$vo.id}" data-field='status' data-value='0' data-action='{:url("$classuri/forbid")}'
                       href="javascript:void(0)" style="color:#090">使用中</a>
                    {else}
                    <span style="color:#090">使用中</span>
                    {/if}
                    {if $vo.isTest eq 1}
                        {if auth("$classuri/resume")}
                        <span class="text-explode">|</span>
                        <a data-update="{$vo.id}" data-field='isTest' data-value='0' data-action='{:url("$classuri/resume")}'
                           href="javascript:void(0)" style="color:#c00">测试</a>
                        {else}
                        <span style="color:#c00">测试</span>
                        {/if}
                    {else}
                        {if auth("$classuri/forbid")}
                        <span class="text-explode">|</span>
                        <a data-update="{$vo.id}" data-field='isTest' data-value='1' data-action='{:url("$classuri/forbid")}'
                           href="javascript:void(0)" style="color:#090">启用</a>
                        {else}
                        <span style="color:#090">启用</span>
                        {/if}
                    {/if}
                {/if}
            </td>
            <td class='text-center nowrap'>
                <a data-open='{:url("$classuri/ask")}?hash={$vo.hash}' data-title="请求字段列表" href="javascript:void(0)" style="color:#090">请求</a>
                <!--<a data-modal='{:url("$classuri/ask")}?hash={$vo.hash}' data-title="请求字段列表" data-width="80%" href="javascript:void(0)" style="color:#090">请求</a>-->
                <span class="text-explode">|</span>
                <a data-open='{:url("$classuri/res")}?hash={$vo.hash}' data-title="响应字段列表" href="javascript:void(0)" style="color:#999">响应</a>
                <!--<a data-modal='{:url("$classuri/res")}?hash={$vo.hash}' data-title="响应字段列表" data-width="80%" href="javascript:void(0)" style="color:#999">响应</a>-->
            </td>
            <td class='text-center'>{$vo.create_at|default="<span style='color:#ccc'>暂无</span>"}</td>
            <td class='text-center'>{$vo.update_at|default="<span style='color:#ccc'>暂无</span>"}</td>
            <td class='text-center'>{$vo.handler_name|default="<span style='color:#ccc'>暂无</span>"}</td>
            <td class='text-center nowrap'>
                {if auth("$classuri/edit")}
                <a data-modal='{:url("$classuri/edit")}?id={$vo.id}' data-title="编辑接口" href="javascript:void(0)">编辑</a>
                {/if}
                {if auth("$classuri/del")}
                <span class="text-explode">|</span>
                <a data-update="{$vo.id}" data-field='delete' data-action='{:url("$classuri/del")}'
                   href="javascript:void(0)" style="color:#c00">删除</a>
                {/if}
            </td>
        </tr>
        {/foreach}
        {if empty($list)}
        <tr>
            <td colspan="14" style="text-align:center">没 有 记 录 了 哦 !</td>
        </tr>
        {/if}
        </tbody>
    </table>
    {if isset($page)}<p>{$page}</p>{/if}
    <script>window.form.render();</script>
</form>

<div id="tags-box" class="hide">
    <form>
        <div class="row" style='max-height:230px;overflow:auto;margin-right:0'>
            {foreach $tags as $key=>$tag}
            <div class="col-xs-4">
                <label style="overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap">
                    <input value="{$key}" type="checkbox"/> {$tag}
                </label>
            </div>
            {/foreach}
        </div>
        <div class="text-center" style="margin-top:10px">
            <div class="hr-line-dashed" style="margin-top:0"></div>
            <button type="button" data-event="confirm" class="layui-btn layui-btn-small"><i class="fa fa-floppy-o"></i>
                保存设置
            </button>
            <button type="button" data-event="cancel" class="layui-btn layui-btn-danger layui-btn-small" type='button'>
                <i class="fa fa-close"></i>
                取消设置
            </button>
        </div>
    </form>
</div>
{/block}

{block name="script"}
{if auth("$classuri/api_tagset")}
<script>
    // 添加标签
    $('body').find('[data-add-tag]').map(function () {
        var self = this;
        var api_id = this.getAttribute('data-add-tag');
        var used_ids = (this.getAttribute('data-used-id') || '').split(',');
        var $content = $(document.getElementById('tags-box').innerHTML);
        for (var i in used_ids) {
            $content.find('[value="' + used_ids[i] + '"]').attr('checked', 'checked');
        }
        $content.attr('api_id', api_id);
        // 标签面板关闭
        $content.on('click', '[data-event="cancel"]', function () {
            $(self).popover('hide');
        });
        // 标签面板确定
        $content.on('click', '[data-event="confirm"]', function () {
            var tags = [];
            $content.find('input:checked').map(function () {
                tags.push(this.value);
            });
            $.form.load('{:url("api_tagset")}', {
                api_id: $content.attr('api_id'),
                'tags': tags.join(',')
            }, 'post');
        });
        // 限制每个表单最多只能选择八个
        $content.on('click', 'input', function () {
            ($content.find('input:checked').size() > 8) && (this.checked = false);
        });
        // 标签选择面板
        $(this).data('content', $content).on('shown.bs.popover', function () {
            $('[data-add-tag]').not(this).popover('hide');
        }).popover({
            html: true,
            trigger: 'click',
            content: $content,
            title: '设置分组（最多设置八个分组）',
            template: '<div class="popover" style="max-width:500px" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content" style="width:500px"></div></div>'
        });
    });
</script>
{/if}
{/block}